<template>
	<div class="cao">
		<div class="head">
			<h3>小众种草</h3>
			<p>
				游侠客独一无二的旅行体验
			</p>
		</div>
		<div class="bottom swiper">
			<ul class="swiper-wrapper">
				<li  class="swiper-slide"  v-for="item in list" :key="item.id">
					<img :src="item.imgURL" >
					<p>{{item.word}}</p>
					<label>{{item.txt}}</label>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	// 引入vue周期函数
	import{onMounted} from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper,{
		FreeMode
	}from 'swiper'
	// 3.swiper组件应用配置
	Swiper.use([FreeMode])
	
	export default{
		name:'Cao',
		data(){
			return{
				list:[
					{id:1,imgURL:'images/1.jpg',word:'银杏特辑',txt:'醉美银杏观赏地'},
					{id:2,imgURL:'images/2.jpg',word:'红叶季',txt:'邂逅浪漫红叶'},
					{id:3,imgURL:'images/3.jpg',word:'向野房车',txt:'新型旅行方式'},
					{id:4,imgURL:'images/4.jpg',word:'徒步赏秋',txt:'寻觅撩人秋色'},
					{id:5,imgURL:'images/5.jpg',word:'游侠人文',txt:'诗行江南'},
					{id:6,imgURL:'images/6.jpg',word:'野奢邦',txt:'宿于山海中'},
				
				],	
			}
		},
		setup(){
			onMounted( ()=>{ 
				new Swiper( '.bottom' , {
					freeMode:{
						momentum:true
					},
					slidesPerView:2.7
				} )
			} )
		}
	}
</script>

<style scoped>
	.cao{
		width: 100%;
		height: 5.35rem;
		margin-top: 0.25rem;
		background-color: white;
		border-radius: 0.2rem;
		
	}
	/* 头部 */
	 .cao .head{
		width: 95%;
		height: 1.2rem;
		display: flex;
		align-items: center;
		
	}
	.cao .head h3{
		font-size: 0.45rem;
		padding-right: 0.5rem;
		font-weight: bold;
		text-indent: 0.4rem;
	}
	.cao .head p{
		color: #ffb551;
		height: 0.4rem;
		width: 45%;
		text-align: center;
		border-radius: 0.1rem;
		line-height: 0.4rem;
		background-color: #fff3ea;
	}
	/* 底部 */
	.cao .bottom ul{
		width: 100%;
		
		height: 3.9rem;
	}
	.cao .bottom ul li{
		width: 32.5%;
		color: white;
		text-align: center;
		height: 3.9rem;
		
	}
	.cao .bottom ul li img{
		width: 100%;
		margin-left: 0.2rem;
		height: 3.9rem;
		background-size: 100% 100%;
	}
	.cao .bottom ul li:first-child img{
		border-radius: 0.2rem 0 0 0.2rem;
	}
	.cao .bottom ul li p{
		position: relative;
		bottom: 1.2rem;
		font-size: 0.5rem;
		font-weight: bold;
	}
	.cao .bottom ul li label{
		position: relative;
		bottom: 1rem;
		font-size: 0.3rem;
	}
	.cao .bottom ul li:last-child img{
		border-radius: 0 0.2rem 0.2rem 0;
	}
</style>
